
.file-info {
  background-color: @font-level-1;
  border-radius: 0 0 3px 3px;
  padding: 15px;

  .info {
    display: flex;
    margin-bottom: 6px;
    .title {
      flex: 1;
      color: white;
      word-wrap: break-word;
      word-break: break-all;
    }
  }

  .content {
    color: @font-level-3;
    font-size: 13px;
    display: flex;

    .arrow-right {
      position: relative;
      width: 15px;
      &:before {
        content: '';
        position: absolute;
        top: 30%;
        right: 3px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 4px 0 4px 7px;
        border-color: transparent transparent transparent #a6a6a6;
      }
    }

    .name {
      flex: 0 1 auto;
    }

    .relative-time {
      flex: 0 0 auto;
    }
  }

  .toolbar {
    margin-left: 0;
  }

  .toolbar .ti {
    margin-left: 16px;
    color: @icon-level-1;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
  }

  .toolbar .ti:hover,
  .toolbar .ti.is-active {
    color: white;
  }
}
